<!--推荐配置-->

<template>
    <div>
        <el-row :gutter="20" class="mb-4">
            <el-col :span="6">
                <el-select v-model="selectedChannel" placeholder="请选择推荐位类型" clearable>
                    <el-option label="男频banner" value="男频banner"></el-option>
                    <el-option label="女频banner" value="女频banner"></el-option>
                    <el-option label="男频" value="男频"></el-option>
                    <el-option label="女频" value="女频"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-input v-model="positionName" placeholder="请输入推荐位名称" clearable></el-input>
            </el-col>
            <el-col :span="6">
                <el-select v-model="selectedStatus" placeholder="请选择状态" clearable>
                    <el-option label="上线" value="上线"></el-option>
                    <el-option label="下线" value="下线"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mb-4">
            <el-col :span="24">
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <el-button type="warning" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="channel" label="推荐位频道"></el-table-column>
            <el-table-column prop="positionName" label="推荐位名称"></el-table-column>
            <el-table-column prop="order" label="排序"></el-table-column>
            <el-table-column prop="type" label="推荐位类型"></el-table-column>
            <el-table-column prop="status" label="状态"></el-table-column>
            <el-table-column label="书籍操作">
                <template #default="scope">
                    <el-button @click="showBookModal(scope.row)" type="text" size="small">书籍添加</el-button>
                    <el-button style="margin-left: 0px" @click="showRemoveBookDrawer(scope.row)" type="text" size="small">书籍移除</el-button>
                </template>
            </el-table-column>
            <el-table-column label="推荐位操作">
                <template #default="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <!-- 添加书籍配置弹窗 -->
        <el-dialog v-model="bookDialogVisible" width="700px" title="添加书籍配置">
            <el-row>
                <el-col :span="24">
                    <el-transfer
                            v-model="selectedBooks"
                            :data="bookList"
                            filterable
                            :titles="['未配置', '已选择']"
                    >
                    </el-transfer>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button  style="margin-left: 400px;margin-top: 20px" @click="bookDialogVisible = false">取 消</el-button>
                <el-button style="margin-top: 20px" type="primary" @click="handleBookSubmit">提 交</el-button>
            </div>
        </el-dialog>

        <!-- 书籍移除抽屉 -->
        <el-drawer v-model="removeBookDrawerVisible" direction="rtl" size="50%" title="书籍移除">
            <el-row :gutter="20">
                <el-col :span="18">
                    <el-input v-model="searchBookName" placeholder="请输入书籍名称" clearable></el-input>
                </el-col>
                <el-col :span="6" class="search-buttons">
                    <el-button type="primary" @click="searchBooks">搜索</el-button>
                    <el-button  @click="resetSearch">重置</el-button>
                </el-col>
            </el-row>
            <el-table :data="removeBookList" style="width: 100%; margin-top: 20px;">
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="author" label="作者"></el-table-column>
                <el-table-column prop="summary" label="简介"></el-table-column>
                <el-table-column prop="cover" label="封面" width="100">
                    <template #default="scope">
                        <img :src="scope.row.cover" style="width: 60px; height: 80px;" />
                    </template>
                </el-table-column>
                <el-table-column label="书籍操作">
                    <template #default="scope">
                        <el-button type="text" @click="removeBook(scope.row)">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button style="margin-left: 500px;margin-top: 20px" @click="removeBookDrawerVisible = false">取 消</el-button>
                <el-button style="margin-top: 20px" type="primary" @click="handleRemoveBookSubmit">提 交</el-button>
            </div>
        </el-drawer>

        <!-- 编辑推荐位弹窗 -->
        <el-dialog v-model="editDialogVisible" width="500px" title="修改推荐位">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
                <el-form-item label="推荐位频道" prop="channel">
                    <el-select v-model="editForm.channel" disabled>
                        <el-option label="男频banner" value="男频banner"></el-option>
                        <el-option label="女频banner" value="女频banner"></el-option>
                        <el-option label="男频" value="男频"></el-option>
                        <el-option label="女频" value="女频"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推荐位名称" prop="positionName">
                    <el-input v-model="editForm.positionName" clearable></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input v-model="editForm.order" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="editForm.status">
                        <el-option label="上线" value="上线"></el-option>
                        <el-option label="下线" value="下线"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推荐位类型" prop="type">
                    <el-input v-model="editForm.type" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button style="margin-left: 300px"  @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditSubmit">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 新增推荐位弹窗 -->
        <el-dialog v-model="addDialogVisible" width="500px" title="添加推荐位">
            <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px">
                <el-form-item label="推荐位频道" prop="channel">
                    <el-select v-model="addForm.channel">
                        <el-option label="男频banner" value="男频banner"></el-option>
                        <el-option label="女频banner" value="女频banner"></el-option>
                        <el-option label="男频" value="男频"></el-option>
                        <el-option label="女频" value="女频"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推荐位名称" prop="positionName">
                    <el-input v-model="addForm.positionName" clearable></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input v-model="addForm.order" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="addForm.status">
                        <el-option label="上线" value="上线"></el-option>
                        <el-option label="下线" value="下线"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="推荐位类型" prop="type">
                    <el-input v-model="addForm.type" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button style="margin-left: 300px" @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleAddSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import { ElMessage, ElMessageBox } from "element-plus";

    const selectedChannel = ref('')
    const positionName = ref('')
    const selectedStatus = ref('')
    const tableData = ref([
        { channel: '男频banner', positionName: '1', order: 1, type: '2x4模板', status: '上线' },
        { channel: '女频banner', positionName: '2', order: 1, type: '2x4模板', status: '上线' },
        { channel: '男频', positionName: '热榜推荐', order: 1, type: '2x4模板', status: '上线' },
        { channel: '女频', positionName: '热榜推荐', order: 1, type: '2x4模板', status: '上线' },
    ])
    const total = ref(4)
    const pageSize = ref(50)
    const currentPage = ref(1)

    const bookDialogVisible = ref(false)
    const removeBookDrawerVisible = ref(false)
    const editDialogVisible = ref(false)
    const addDialogVisible = ref(false)
    const editForm = ref({
        channel: '',
        positionName: '',
        order: '',
        status: '',
        type: '',
    })
    const addForm = ref({
        channel: '',
        positionName: '',
        order: '',
        status: '',
        type: '',
    })
    const rules = ref({
        channel: [{ required: true, message: '请选择推荐位频道', trigger: 'blur' }],
        positionName: [{ required: true, message: '请输入推荐位名称', trigger: 'blur' }],
        order: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        type: [{ required: true, message: '请输入推荐位类型', trigger: 'blur' }],
    })

    const bookList = ref([
        { key: 1, label: '2' },
        { key: 2, label: '222' },
        { key: 3, label: 'test001' },
        { key: 4, label: '母亲抢了我的男朋友' },
        { key: 5, label: '反转结局' },
        { key: 6, label: '虫多的诅咒' },
        { key: 7, label: '环游世界' },
        // Add more books as needed
    ])
    const selectedBooks = ref([])

    const removeBookList = ref([
        { name: '时代大亨', author: '夜逍不良人', summary: '刘北怒外重返1990年，国...', cover: 'path/to/cover1.jpg' },
        { name: '护国战神', author: '水中鱼', summary: '[战神]【强者回归】[无敌]', cover: 'path/to/cover2.jpg' },
        { name: '借命红包', author: '夜暖暖', summary: '过年回村遇到一个老太婆，...', cover: 'path/to/cover3.jpg' },
        // Add more books as needed
    ])
    const searchBookName = ref('')

    const handleSearch = () => {
        console.log('搜索按钮点击')
        // 在这里添加搜索功能
    }

    const handleReset = () => {
        selectedChannel.value = ''
        positionName.value = ''
        selectedStatus.value = ''
        console.log('重置按钮点击')
        // 在这里添加重置功能
    }

    const handleAdd = () => {
        addForm.value = {
            channel: '',
            positionName: '',
            order: '',
            status: '',
            type: '',
        }
        addDialogVisible.value = true
    }

    const handleAddSubmit = () => {
        console.log('新增推荐位提交', addForm.value)
        // 在这里添加新增提交功能
        addDialogVisible.value = false
    }

    const showBookModal = (row) => {
        console.log('书籍添加按钮点击', row)
        bookDialogVisible.value = true
    }

    const showRemoveBookDrawer = (row) => {
        console.log('书籍移除按钮点击', row)
        removeBookDrawerVisible.value = true
    }

    const handleEdit = (row) => {
        editForm.value = { ...row }
        editDialogVisible.value = true
    }

    const handleEditSubmit = () => {
        console.log('提交按钮点击', editForm.value)
        // 在这里添加编辑提交功能
        editDialogVisible.value = false
    }

    const handleDelete = (row) => {
        ElMessageBox.confirm('此操作将永久删除该推荐, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage.success("删除成功")
            // Implement delete logic here
        }).catch(() => {
            ElMessage.error("删除失败")
            // Handle cancel action
        })
    }

    const handleExport = () => {
        console.log('导出按钮点击')
        // 在这里添加导出功能
    }

    const handleSizeChange = (newSize) => {
        pageSize.value = newSize
        console.log('每页显示数量变化', newSize)
        // 在这里添加处理分页大小变化的功能
    }

    const handleCurrentChange = (newPage) => {
        currentPage.value = newPage
        console.log('当前页码变化', newPage)
        // 在这里添加处理页码变化的功能
    }

    const handleBookSubmit = () => {
        console.log('提交按钮点击', selectedBooks.value)
        // 在这里添加提交功能
        bookDialogVisible.value = false
    }

    const handleRemoveBookSubmit = () => {
        console.log('书籍移除提交按钮点击')
        // 在这里添加移除书籍提交功能
        removeBookDrawerVisible.value = false
    }

    const searchBooks = () => {
        console.log('搜索书籍', searchBookName.value)
        // 在这里添加搜索书籍功能
    }

    const resetSearch = () => {
        searchBookName.value = ''
        console.log('重置搜索')
        // 在这里添加重置搜索功能
    }

    const removeBook = (row) => {
        ElMessageBox.confirm('此操作将永久移除该书籍, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage.success("移除成功")
            // Implement delete logic here
        }).catch(() => {
            ElMessage.error("移除失败")
            // Handle cancel action
        })
    }
</script>

<style scoped>
    .mb-4 {
        margin-bottom: 16px;
    }
    .search-buttons {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
</style>
